<template>
  <div>
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px" size="medium"
      @submit.native.prevent>
      <div>
        <div class="record-title">GAD—7自评量表</div>
      </div>

      <div class="table-container">
        <table class="table-layout center">
          <tbody>
            <tr>
              <td class="table-cell">
                在过去的两周内，有多少时候您收到以下任何问题困扰？（在您的选择下打“√”）
              </td>
              <td class="table-cell">完全不会
              </td>
              <td class="table-cell">好几天
              </td>
              <td class="table-cell">一半以上的天数
              </td>
              <td class="table-cell">几乎每天
              </td>
            </tr>
            <tr>
              <td class="table-cell">1. 感觉紧张，焦虑或急切
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell">2. 不能够停止或控制担忧
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell">3. 对各种各样的事情担忧过多
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell">4. 很难放松下来
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell">5. 由于不安而无法静坐
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell">6. 变得容易烦恼或急躁
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell">7. 感到似乎将有可怕的事情发生而害怕
              </td>
              <td class="table-cell">0
              </td>
              <td class="table-cell">1
              </td>
              <td class="table-cell">2
              </td>
              <td class="table-cell">3
              </td>
            </tr>
            <tr>
              <td class="table-cell" colspan="5">总分： ＿＿＿＿﹦﹝＿＿﹢＿＿﹢＿＿﹞
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="instructions center">
        <p style="text-indent: 2em;">评分标准：
        </p>
      </div>

      <div class="table-container">
      <table class="table-layout center" style="margin-bottom: 30px;">
        <tbody>
          <tr>
            <td class="table-cell">分值
            </td>
            <td class="table-cell">没有抑郁
            </td>
            <td class="table-cell">有抑郁症状
            </td>
            <td class="table-cell">明显抑郁症状
            </td>
            <td class="table-cell">重度抑郁
            </td>
          </tr>
          <tr>
            <td class="table-cell" rowspan="2">标准分
              （请在相应分值处打“√”）
            </td>
            <td class="table-cell">0-4分
            </td>
            <td class="table-cell">5-9分
            </td>
            <td class="table-cell">10-14分
            </td>
            <td class="table-cell">15-27分
            </td>
          </tr>
          <tr>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
            <td class="table-cell">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    </el-form>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
    }
  },
  methods: {
  },
}
</script>
<style lang="scss" scoped>
.center {
  width: 80%;
  margin: 0 auto;
}

.record-title {
  font-size: 27px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

.instructions {
  font-size: 18px;
  line-height: 1.6;
  padding: 10px;
  border-radius: 5px;
}

.instructions p {
  margin-bottom: 10px;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

div.table-container {
  table.table-layout {
    table-layout: fixed;
    border-collapse: collapse;
    text-align: center;

    td.table-cell {
      display: table-cell;
      height: 38px;
      border: 1px solid #333;
      font-size: 16px;
      overflow-wrap: break-word;
    }
  }
}

.table-layout tr:not(:last-child) td:nth-child(1) {
  width: 50%;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 16px;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

.static-content-item-head {
  min-height: 20px;
  font-size: 15px;
  display: flex;
  // justify-content: space-around;
  justify-content: space-between;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}

::v-deep .el-divider--horizontal {
  margin: 0;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}

::v-deep .el-form-item__label {
  font-size: 16px;
}

.el-form-item {
  margin-bottom: 0px;
}

.footer {
  font-size: 20px;

  input {
    text-align: left;
    width: 40%;
  }
}

//宽度
.w-50 {
  width: 50px;
}

.w-100 {
  width: 100px;
}

.w-150 {
  width: 150px;
}

.w-200 {
  width: 200px;
}

// 去除input样式
input {
  border: none;
  text-align: center;
  width: 100%;
}

input[type=text]:focus {
  outline: none;
}

input::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}



.textareaStyle {
  width: 100%;
  height: 93%;
  margin-top: 10px;
}

textarea {
  border: none;
  text-align: center;
  width: 100%;
}

textarea[type=text]:focus {
  outline: none;
}

textarea::placeholder {
  color: #ccc;
  /* 设置 placeholder 颜色为灰色 */
}
</style>
